import React from 'react';
import Api from 'Utils/api';
import dialog from 'Utils/dialog';
import Title from 'Page/CommonComponents/Title';
import { RESOURCE_HOST } from 'Constants/config';
import { connect } from 'react-redux';
import * as routerActions from 'react-router-redux';
import './index.scss';

class RunOncePage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      runDirectory: [],
      Parentdirectory: []
    };
    this.init = ::this.init;
  }
  componentWillMount() {
    this.init();
  }
  init() {
    const api = new Api({
      method: 'GET',
      path: '/directorys',
      success: (res) => {
        this.setState({
          Parentdirectory: res
        }, () => {
          if (res.length !== 0) {
            for (let i = 0, len = res.length; i < len; i++) {
              this.initProcess(res[i]);
            }
          }
        });
      },
      error: (msg) => {
        const buttons = [
          {
            label: '知道了',
            onClick: () => {},
          },
        ];
        dialog.open('提示', msg, buttons, 'center');
      }
    });
    api.run();
  }
  initProcess(directory) {
    const api = new Api({
      method: 'GET',
      path: `/processes/user/${directory.id}`,
      success: (res) => {
        const newRunDirectory = this.mergeDirectory(directory, res);
        this.setState({
          runDirectory: newRunDirectory
        });
      },
      error: (msg) => {
        const buttons = [
          {
            label: '知道了',
            onClick: () => {},
          },
        ];
        dialog.open('提示', msg, buttons, 'center');
      }
    });
    api.run();
  }
  mergeDirectory(directory, process) {
    const { Parentdirectory } = this.state;
    for (let i = 0, len = Parentdirectory.length; i < len; i++) {
      if (Parentdirectory[i].id === directory.id) {
        Parentdirectory[i].child = process;
      }
    }
    return [...Parentdirectory];
  }
  handleClick(id) {
    this.props.dispatch(routerActions.push(`/run_once/detail/${id}`));
  }
  render() {
    const { runDirectory } = this.state;
    return (
      <div className="run-once-page">
        <Title title="最多跑一次" />
        <div className="content-wrap">
          <div className="run-once-title">
            办事指南
          </div>
          <div className="items-wrap">
            {
              runDirectory.length > 0 && runDirectory.map(item => (
                <div className="item-wrap" key={item.id}>
                  <div className="item-title">{item.name}</div>
                  <div className="icon-wrap">
                    {
                      item.child && item.child.length > 0 && item.child.map(child => (
                        <div className="item-icon" key={child.id} onClick={this.handleClick.bind(this, child.id)}>
                          <img src={`${RESOURCE_HOST}${child.logo}`} alt={child.process_name} />
                          <div className="label">
                            {child.process_name}
                          </div>
                        </div>
                      ))
                    }
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}
export default connect(mapStateToProps)(RunOncePage);
